<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      body {
        height: 5000px;
      }
      .app {
        border: 1px solid grey;
        margin: 200px auto;
        width: 250px;
        position: sticky;
        top: 0px;
      }
      .app .header {
        line-height: 26px;
      }
      .app .header span {
        padding: 10px;
        font-size: 18px;
      }
      .app .header .choose {
        color: #f30;
      }
      .app .body .choose {
        color: #f30;
      }
      .app .body {
        height: 150px;
        padding: 10px;
      }
      .app .body p {
        display: none;
      }
      .app .body .choose {
        display: block;
      }
    </style>
  </head>
  <body>
    <div id="app" class="app">
      <div class="header">
        <span class="choose">精选</span>
        <span>社会</span>
        <span>娱乐</span>
        <span>体育</span>
      </div>
      <div class="body">
        <p class="choose">精选新闻内容</p>
        <p>社会新闻内容</p>
        <p>娱乐新闻内容</p>
        <p>体育新闻内容</p>
      </div>
    </div>

    <script>
      // 获取内容
      // var app = document.getElementById('app');
      var spans = app.getElementsByTagName('span')
      var ps = app.getElementsByTagName('p')
      // 绑定事件
      for (var i = 0; i < spans.length; i++) {
        // 设置索引值
        spans[i].index = i
        // 绑定事件
        spans[i].onclick = function () {
          // 排他法设置样式
          // 清除所有
          for (var j = 0; j < spans.length; j++) {
            spans[j].className = ''
          }
          // 设置被点击的span的类
          spans[this.index].className = 'choose'
          // 对p排他
          for (var k = 0; k < ps.length; k++) {
            // 清除所有
            ps[k].className = ''
          }
          // 设置被点击的p的类
          ps[this.index].className = 'choose'
        }
      }
    </script>
  </body>
</html>
